<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
            <el-input v-model="formInline.name" placeholder="资产编号或资产名称" clearable />
        </el-form-item>
        <el-form-item label="">
            <el-input v-model="formInline.user" placeholder="资产使用人" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="" @click="onSubmit">重置</el-button>
        </el-form-item>
    </el-form>

    <el-row>
        <el-col :span="24">
            <el-button type="primary" @click="openDialog()">新增流转</el-button>
            <el-button type="" @click="editData()" :disabled="butDisabled">修改流转</el-button>
            <el-button type="" @click="onSubmit">删除</el-button>
        </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%" table-layout="fixed" @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column label="申请编号" min-width="120" align="center">
            <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="资产名称" min-width="120" align="center" />
        <el-table-column prop="address" label="资产编号" min-width="120" show-overflow-tooltip width="150" align="center" />
        <el-table-column prop="name" label="资产原始位置" min-width="120" align="center" />
        <el-table-column prop="name" label="流转位置" min-width="120" align="center" />
        <el-table-column prop="name" label="流转时间" min-width="120" align="center" />
        <el-table-column prop="name" label="流转原因" min-width="150" align="center" />
        <el-table-column prop="name" label="流转责任人" min-width="150" align="center" />
        <el-table-column prop="name" label="流转状态" min-width="120" align="center" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button link type="primary" size="small">查看</el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-pagination v-model:current-page="pagination.currentPage" class="mt-5 float-right"
        v-model:page-size="pagination.pageSize" :page-sizes="pagination.page" background layout="sizes, prev, pager, next"
        :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />


    <Dialog ref="dialog"></Dialog>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { User, Pagination } from './index.ts'
import Dialog from './dialog.vue'
const dialog = ref()
const openDialog = () => {
    dialog.value.dialogForms = true
}

const editData = () => {
    dialog.value.dialogForms = true
}
//表单
const formInline = reactive({
    user: '',
    name: '',
})

const onSubmit = () => {
    console.log('submit!')
}



//表格


// const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const butDisabled = ref(true)
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val;
    if (multipleSelection.value.length === 1) {
        butDisabled.value = false
    } else {
        butDisabled.value = true
    }
    console.log(multipleSelection.value);
}

const tableData: User[] = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-08',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-06',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-07',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]


//分页


const pagination = ref<Pagination>({
    currentPage: 1,
    pageSize: 10,
    page: [10, 20, 50, 100],
    total: 100
})
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}


</script>
  
<style></style>
  